<template>
  <div class="layout-padding">
    <div class="layout-padding-auto layout-padding-view">
      
      <avue-form v-model="form" :option="option" @submit="formSubmit">
        <template #datetime>
          <el-date-picker
            v-model="query.queryTime"
            type="daterange"
            range-separator="-"
            format="YYYY-MM-DD"
            valueFormat="YYYY-MM-DD"
            start-placeholder="起始时间"
            end-placeholder="结束时间"
          />
        </template>
      </avue-form>
      <el-scrollbar>
        <div class="charts-block">
          <h3 class="h-title">告警信息统计分析</h3>
          <v-chart class="w-full" :option="optionChart1" style="height: 400px;" />
          <div class="card">
            <el-row >
              <el-col :span="8">
                <h3 class="h-title">告警类型占比分析</h3>
                <v-chart class="w-full" :option="optionChart2" style="height: 400px;" />
              </el-col>
              <el-col :span="8">
                <h3 class="h-title">告警等级统计排名</h3>
                <v-chart class="w-full" :option="optionChart3" style="height: 400px;" />
              </el-col>
              <el-col :span="8">
                <h3 class="h-title">告警状态统计排名</h3>
                <v-chart class="w-full" :option="optionChart4" style="height: 400px;" />
              </el-col>
            </el-row>
          </div>
        </div>
      </el-scrollbar>
    </div>
  </div>
</template>

<script lang="ts" name="alarmPage" setup>

import { alarmAllInfo, alarmStatus, alarmLevel, alarmType } from '/@/api/alarm/alarmpage'

import { validateNull } from '/@/utils/validate';
import { useMessage, useMessageBox } from '/@/hooks/message';

import VChart from 'vue-echarts';
import { use } from 'echarts/core';
import { LineChart, BarChart, PieChart } from 'echarts/charts';
import { TitleComponent, GridComponent, TooltipComponent, LegendComponent, ToolboxComponent, MarkPointComponent, MarkLineComponent } from 'echarts/components';
import { CanvasRenderer } from 'echarts/renderers';
import { useDict } from '/@/hooks/dict';
use([TitleComponent, LineChart, BarChart, PieChart, CanvasRenderer, GridComponent, TooltipComponent, LegendComponent, ToolboxComponent, MarkPointComponent, MarkLineComponent]);

const { alarm_level } = useDict('alarm_level');



let startDate = new Date().toJSON().split('T')[0]
let endDate = new Date((new Date().getTime() - 7*24*3600*1000)).toJSON().split('T')[0]

const query:any = ref({
  queryTime: [endDate + ' 00:00:00', startDate + ' 23:59:59']
})
const form = ref({})
const option = ref({
  menuPosition: 'left',
  menuSpan: 6,
  submitText: '查询',
  submitIcon: 'search',
  emptyBtn: false,
  column: [
    {
      label: '日期范围',
      span: 6,
      prop: 'datetime',
      type: 'daterange'
    }
  ]
})


onMounted(() => {
  
    getAlarmPageInfo()
      getAlarmLevel()
      getAlarmStatus()
      getAlarmType()
    
  })
  



const formSubmit = (form:object, done:Function) => {
  if(validateNull(query.value.queryTime)){
    query.value.queryTime = [endDate + ' 00:00:00', startDate + ' 23:59:59']
  } else {
    query.value.queryTime = [query.value.queryTime[0] + ' 00:00:00', query.value.queryTime[1] + ' 23:59:59']
  }
  
  getAlarmPageInfo()
  getAlarmLevel()
  getAlarmStatus()
  getAlarmType()
  done()
}

const getAlarmPageInfo = () => {
  alarmAllInfo(Object.assign(query.value)).then(res => {
    if(!validateNull(res.data)) {
      optionChart1.xAxis.data = res.data.map((obj:any) => {return obj.timeDay})
      optionChart1.series[0].data = res.data.map((obj:any) => {return obj.count})
    }
  })
}
const getAlarmStatus = () => {
  alarmStatus(Object.assign(query.value)).then(res => {
    if(!validateNull(res.data)) {
      optionChart4.series[0].data = res.data
    }
  })
}
const getAlarmLevel = () => {
  alarmLevel(Object.assign(query.value)).then(res => {
    
    if(!validateNull(res.data)) {
      res.data .forEach((obj:any) => {
        if(obj.level == 3) {
          obj.itemStyle = {color: 'red'}
        }
        if(obj.level == 2) {
          obj.itemStyle = {color: '#ddc221'} 
        }
        if(obj.level == 1) {
          obj.itemStyle = {color: '#00e9ff'}
        }
      });
      optionChart3.series[0].data = res.data
    }  
  })
}
const getAlarmType = () => {
  alarmType(Object.assign(query.value)).then(res => {
    if(!validateNull(res.data)) {
      optionChart2.series[0].data = res.data
    }
    
  })
}
const optionChart1 = reactive({
	tooltip: {
		trigger: 'item',
	},
	grid: {
		bottom: 50,
		left: 50
	},
	legend: {},
	toolbox: {
		show: true,
		feature: {
			magicType: { type: ['line', 'bar'] },
			restore: {},
			saveAsImage: {},
		},
	},
	xAxis: {
		type: 'category',
		// boundaryGap: false,
		data: [],
	},
	yAxis: {
		type: 'value',
    name: '告警次数'
	},
	series: [
		{
			type: 'bar',
			data: [],
			markPoint: {
				data: [
					{ type: 'max', name: 'Max' },
					{ type: 'min', name: 'Min' }
				]
			}
		}
	],
});
const optionChart2 = reactive({
	tooltip: {
		trigger: 'item',
	},
	grid: {
		bottom: 50,
		left: 50
	},
	legend: {},
	series: [
		{
			type: 'pie',
      radius: '50%',
      center: ['50%', '50%'],
      data: [],
      label: {
        position: 'outer',
        alignTo: 'edge',
        margin: 20
      },
		}
	],
});
const optionChart3 = reactive({
	tooltip: {
		trigger: 'axis',
	},
	grid: {
		bottom: 50,
		left: 60
	},
	xAxis: {
    type: 'value',
    boundaryGap: [0, 0.01],
    axisLabel: {
      color: '#333'
    }
  },
  yAxis: {
    type: 'category',
    data: ['紧急', '严重告警', '一般'],
    axisLabel: {
      color: '#333'
    }
  },
	series: [
		{
			type: 'bar',
			data: [
        {
          name: '紧急告警',
          value: 0,
          itemStyle: {
            color: 'red'
          }
        },
        {
          name: '严重告警',
          value: 0,
          itemStyle: {
            color: '#ddc221'
          }
        },
        {
          name: '一般告警',
          value: 0,
          itemStyle: {
            color: '#00e9ff'
          }
        }
      ],
      label: {
        show: true,
        position: 'right',
        fontSize: 20
      }
		}
	],
});
const optionChart4 = reactive({
	tooltip: {
		trigger: 'axis',
	},
	grid: {
		bottom: 50,
		left: 50
	},
	xAxis: {
    type: 'value',
    boundaryGap: [0, 0.01],
    axisLabel: {
      color: '#333'
    }
  },
  yAxis: {
    type: 'category',
    data: ['未处理', '已处理'],
    axisLabel: {
      color: '#333'
    }
  },
	series: [
		{
			// name: '告警处理状态',
			type: 'bar',
			data: [],
      label: {
        show: true,
        position: 'right',
        fontSize: 20
      }
		}
	],
});
watch(
	alarm_level,
	 (val: any) => {
		if (val) {
			let arr = val && val.map((obj:any) => {return obj.label})
      optionChart3.yAxis.data = arr
		}
	},
	{
		immediate: true,
	}
)
</script>
<style lang="scss" scoped>
:deep(.el-date-editor.el-input__wrapper){
  width: 100%;
}
:deep(.avue-group--header .avue-form__menu--left.no-print) {
  padding-top: 0!important;
}
.h-title {
  font-size: 20px;
  font-weight: 700;
}
</style>
